

export function initToolbar(self) {
  const { category, colors } = self.geographies
  self.toolBar3D = new THREE.Object3D()
  self.toolBar3D.buttons = []
  self.toolBar3D.tick = self.scene.tick

  self.labels = new THREE.Object3D()
  self.labels.position.copy( self.toolBar3D.position )

  var textGeo = new THREE.PlaneBufferGeometry(256/45, 32/45)

  function toolbarTick() {
    if (self.$scope.selectedGeography && this.geographyName !== self.$scope.selectedGeography) {
      if (this.originalColor === undefined) {
        this.originalColor = this.material.color.getHex();
      }
      this.material.color.setHex( 0x484946 );
    } else if (this.originalColor !== undefined) {
      this.material.color.setHex( this.originalColor );
    }

    // console.log(self.$scope, self.$scope.hoveredGeography, self.geographyName)

    if (self.$scope.hoveredGeography === this.geographyName) {
      this.position.y += ((+0.36/2) - this.position.y) * 0.1
      this.scale.y += (1.36 - this.scale.y) * 0.1
      this.label.scale.x += (1.2 - this.label.scale.x) * 0.1
      var s = this.label.scale.x
      this.label.scale.set(s, s, s)
      this.label.position.y = this.position.y - 10.5
    } else {
      this.position.y += (0 - this.position.y) * 0.1
      this.scale.y += (1 - this.scale.y) * 0.1
      this.label.scale.x += (1 - this.label.scale.x) * 0.1
      var s = this.label.scale.x
      this.label.scale.set(s, s, s)
      this.label.position.y = this.position.y - 10.5
    }
  }

  // console.log(category)
  for (var i=0; i < category.length; i++) {
    var obj = new THREE.Object3D()
    var bg = new THREE.Mesh(
      new THREE.PlaneBufferGeometry((6/5)*6, 1),
      new THREE.MeshBasicMaterial({color: colors[i]})
    )

    obj.position.set((6/5)*6*(i-(category.length-1)/2),  -10.5,  0 )
    bg.geographyName = category[i]
    // bg.geographyName = `toolbar_bg_${category[i]}`


    bg.tick = toolbarTick
    obj.add(bg)

    obj.tick = function() {
      this.children[0].tick()
    }

    self.toolBar3D.buttons.push(bg)

    var textCanvas = document.createElement('canvas')
    textCanvas.width = 256
    textCanvas.height = 32

    var tex = new THREE.Texture(textCanvas)
    tex.minFilter = THREE.LinearFilter

    setTimeout((function(textCanvas, tex, title) {
      return function() {
        var ctx = textCanvas.getContext('2d')
        ctx.fillStyle = '#000000'
        ctx.fillRect(0,0, ctx.canvas.width, ctx.canvas.height)

        ctx.font = 'lighter 30px Lato, sans-serif'
        ctx.fillStyle = '#FFFFFF'
        var w = ctx.measureText(title).width

        ctx.fillText(title, (ctx.canvas.width-w)/2, 28)
        tex.needsUpdate = true
      }
    })(textCanvas, tex, category[i]), 5000)

    var mat = new THREE.MeshBasicMaterial( { map: tex, side: THREE.DoubleSide, blending: THREE.AdditiveBlending } )
    mat.transparent = true
    mat.depthWrite = false
    mat.depthTest = false

    var text = new THREE.Mesh( textGeo, mat )

    text.position.copy(obj.position)
    bg.label = text
    self.labels.add(text)
    text.position.z = 0.01

    self.toolBar3D.add(obj)
  }

  // console.log(self.toolBar3D)

  self.toolBar3D.visible = false
  self.labels.visible = false
  self.scene.add(self.toolBar3D)
  self.labelScene.add(self.labels)
}
